<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>穿梭框组件文档 - layui.transfer</title>
	<link rel="stylesheet" href="../libs/layui/layui-2.9.14/dist/css/layui.css">
	<script src="../libs//layui//layui-2.9.14/dist/layui.js"></script>
	<style>


	</style>
</head>

<body style="margin:100px ;">
	<button type="button" class="layui-btn" id="btn">一个标准的按钮</button>

	<div id="test1"></div>
	<div id="test2"></div>
	<script>
		layui.use('transfer', function () {
			var transfer = layui.transfer;

			layui.$('#btn').click(function(){
				//获得右侧数据
				var getData = transfer.getData('demo1'); 
				console.log(getData)
			})
			//渲染
			transfer.render({
				elem: '#test1',  //绑定元素
				title: ['标题一', '标题二'],
				showSearch: true,
				value: [1, 2],
				data: [
					{ "value": "1", "title": "李白", "disabled": "", "checked": "" }
					, { "value": "2", "title": "杜甫", "disabled": "", "checked": "" }
					, { "value": "3", "title": "贤心", "disabled": "", "checked": "" }
				],
				id: 'demo1' //定义索引
			});

			//渲染
			transfer.render({
				elem: '#test2',  //绑定元素
				title: ['标题3', '标题4'],
				showSearch: true,
				value: [2],
				id: 'demo2', //定义索引
				data: [
					{ "id": "1", "name": "李白" }
					, { "id": "2", "name": "杜甫" }
					, { "id": "3", "name": "贤心" }

				],
				parseData: function (res) {
					return {
						value: res.id //数据值
						, title: res.name //数据标题
						, disabled: res.disabled  //是否禁用
						, checked: res.checked //是否选中
					}
				}
				, onchange: function (data, index) {
					console.log(data); //得到当前被穿梭的数据
					console.log(index); //如果数据来自左边，index 为 0，否则为 1
					
				}

			});
		});
	</script>


</body>

</html>